<template>
  <div class="test_box" ref="box">
    <div
      class="test_box_item"
      :style="{ width: item + '%'}"
      v-for="(item, index) in comlist"
      :key="index"
    >
      <div class="test_box_cont">{{ list[index] }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "test",
  components: {},
  data() {
    return {
      dataObj: {
        code: 0,
        msg: "成功",
        data: [
          {
            name: "服装配饰",
            value: 104075572.42,
            children: [
              {
                name: "女装",
                value: 82312080.89,
                children: null,
                id: "780a8c09-4199-4030-97d8-dadbb4370e75",
                pid: 1056284596,
                category_id: 20005,
                amount: 82312080.89,
                category_name: "女装",
                flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
                create_time: "2021-12-20 11:30:00",
              },
            ],
            id: "3bd5b881-559f-42d9-8994-c4e6048ce33d",
            pid: 0,
            category_id: 1056284596,
            amount: 104075572.42,
            category_name: "服装配饰",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "美容个护",
            value: 24940242.29,
            children: [],
            id: "800af18e-044a-4511-ba28-7d2e09752040",
            pid: 0,
            category_id: 1199520829,
            amount: 24940242.29,
            category_name: "美容个护",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "母婴用品",
            value: 14648996.1,
            children: [],
            id: "6b7c5b87-a878-4d2b-945c-635c8511aca5",
            pid: 0,
            category_id: 1017759346,
            amount: 14648996.1,
            category_name: "母婴用品",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "食品生鲜",
            value: 10700503.15,
            children: [],
            id: "1267db16-0869-4ee4-9719-95fabe9862fa",
            pid: 0,
            category_id: 1430829699,
            amount: 10700503.15,
            category_name: "食品生鲜",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "家居宠物",
            value: 10095808.0,
            children: [],
            id: "2b8a02be-a2d8-474b-a314-c2839b433235",
            pid: 0,
            category_id: 870033132,
            amount: 10095808.0,
            category_name: "家居宠物",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "运动户外",
            value: 8348538.2,
            children: [],
            id: "00f59af5-2192-4518-b2c8-f7d08667d6db",
            pid: 0,
            category_id: 1346729997,
            amount: 8348538.2,
            category_name: "运动户外",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "珠宝饰品",
            value: 8053749.84,
            children: [],
            id: "c0646cdd-4ddc-459e-9bbc-023d7ce8fed0",
            pid: 0,
            category_id: 1092671062,
            amount: 8053749.84,
            category_name: "珠宝饰品",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "女鞋/男鞋/箱包",
            value: 5078123.3,
            children: [],
            id: "3b8d1851-7931-480c-8e0a-4f46076c8137",
            pid: 0,
            category_id: 1025797344559972,
            amount: 5078123.3,
            category_name: "女鞋/男鞋/箱包",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "图书音像",
            value: 4611215.48,
            children: [],
            id: "4005d7d2-8634-4466-bc31-498d6afee0f7",
            pid: 0,
            category_id: 823255214,
            amount: 4611215.48,
            category_name: "图书音像",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
          {
            name: "3C数码",
            value: 3118682.06,
            children: [],
            id: "d7e6ddd4-6cb1-4bb1-9421-5f1acbf926c6",
            pid: 0,
            category_id: 2571055,
            amount: 3118682.06,
            category_name: "3C数码",
            flow_id: "26e96428-d925-41ed-8c54-fc7d65a2b414",
            create_time: "2021-12-20 11:30:00",
          },
        ],
      },
      list: [], //数据
      comlist: [], //占比 百分比
      areaList: [], //占比 面积
      comArea: 0
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getComArea();
    this.comList();
    this.list.sort(function (a, b) {
      return b - a;
    });
    this.comlist = this.countPercentage(this.list);

    this.comlist.forEach((item,index) => {
      console.log(item)
    });
  },
  mounted() {},
  methods: {
    comList() {
      for (let i = 0; i < this.dataObj.data.length; i++) {
        this.list.push(this.dataObj.data[i].value);
      }
    },
    countPercentage(countArray) {
      var j = eval(countArray.join("+"));
      var resultArray = [];
      for (var i = 0; i < countArray.length; i++) {
        var k = Math.floor((countArray[i] / j)* 100);
        resultArray.push(k);
      }
      return resultArray;
    },
    getComArea() {
      this.$nextTick(() => {
        let box = this.$refs;
        this.comArea = box.box.clientWidth*box.box.clientHeight;
      });
      
      
    },
  },
};
</script>
<style lang="less" scoped>
.test_box {
  width: 100%;
  height: 500px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.test_box_item {
  height: 500px;
  padding: 5px;
  box-sizing: border-box;
  .test_box_cont {
    width: 100%;
    height: 100%;
    background-color: red;
  }
}
</style>
